<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>行业分类：</label>
                <el-select
                    v-model="queryData.industryId"
                    placeholder="行业分类"
                    @change="choseSearchExam"
                    filterable
                    clearable
                >
                    <el-option
                        v-for="item in industryOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>所属考试：</label>
                <el-select
                    v-model="queryData.examId"
                    placeholder="考试"
                    filterable
                    clearable
                    reserve-keyword
                    @change="choseSearchPackage"
                >
                    <el-option
                        v-for="item in examOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>套餐：</label>
                <el-select v-model="queryData.packageId" placeholder="套餐" filterable clearable>
                    <el-option
                        v-for="item in packageOptions"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="search-item">
                <label>订单号：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.orderSn"
                        clearable
                        placeholder="订单号"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <label>手机号：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.mobile"
                        clearable
                        placeholder="手机号"
                    ></el-input>
                </div>
            </div>

            <div class="search-item">
                <label>订单状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.orderStatus"
                        filterable
                        clearable
                        placeholder="订单状态"
                    >
                        <el-option
                            v-for="key in Object.keys(orderStatus)"
                            :key="key"
                            :label="orderStatus[key]"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付状态：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.paymentStatus"
                        filterable
                        clearable
                        placeholder="支付状态"
                    >
                        <el-option
                            v-for="key in Object.keys(paymentStatus)"
                            :key="key"
                            :label="paymentStatus[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付方式：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.paymentType"
                        filterable
                        clearable
                        placeholder="支付方式"
                    >
                        <el-option
                            v-for="key in Object.keys(paymentType)"
                            :key="key"
                            :label="paymentType[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付设备：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.deviceType"
                        filterable
                        clearable
                        placeholder="支付设备"
                    >
                        <el-option
                            v-for="key in Object.keys(deviceType)"
                            :key="key"
                            :label="deviceType[key].desc"
                            :value="key"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <!--            <div class="search-item">
                <label>创建时间：</label>
                <div class="table-query-input">
                    <el-date-picker
                        v-model="queryData.orderTime"
                        type="datetimerange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </div>

            </div>-->
            <div class="search-item">
                <label>创建时间：</label>
                <el-date-picker
                    v-model="queryData.createdStartTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <el-date-picker
                    v-model="queryData.createdEndTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <!--            <div class="search-item">-->
            <!--                <label>支付时间：</label>-->
            <!--                <div class="table-query-input">-->
            <!--                    <el-date-picker-->
            <!--                        v-model="queryData.payTime"-->
            <!--                        type="datetimerange"-->
            <!--                        align="right"-->
            <!--                        unlink-panels-->
            <!--                        range-separator="至"-->
            <!--                        start-placeholder="开始日期"-->
            <!--                        end-placeholder="结束日期"-->
            <!--                        value-format="yyyy-MM-dd HH:mm:ss"-->
            <!--                        :picker-options="pickerOptions"-->
            <!--                    >-->
            <!--                    </el-date-picker>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="search-item">
                <label>支付时间：</label>
                <el-date-picker
                    v-model="queryData.payStartTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <el-date-picker
                    v-model="queryData.payEndTime"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="orderSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="calendarResetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class=" table-page-box">
            <p>金额：{{ totalAmount }}</p>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column label="订单号" min-width="180" prop="id">
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    width="160"
                    prop="createdTime"
                >
                </el-table-column>
                <el-table-column
                    label="套餐"
                    min-width="120"
                    prop="packageName"
                >
                </el-table-column>
                <el-table-column
                    label="行业"
                    min-width="120"
                    prop="industryName"
                >
                </el-table-column>
                <el-table-column label="考试" min-width="120" prop="examName">
                </el-table-column>
                <el-table-column label="sku名" min-width="120" prop="skuName">
                </el-table-column>
                <el-table-column
                    label="用户"
                    min-width="120"
                    prop="master.name"
                >
                </el-table-column>
                <el-table-column label="订单金额" width="120" prop="price">
                    <template slot-scope="scope">
                        <p>{{ (scope.row.price / 100).toFixed(2) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="orderStatus[scope.row.orderStatus]"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    label="支付时间"
                    width="160"
                    prop="paymentModel.payTime"
                >
                </el-table-column>
                <el-table-column label="支付设备" width="100">
                    <template slot-scope="scope">
                        <k-tag
                            v-if="
                                scope.row.paymentModel &&
                                    scope.row.paymentModel.deviceType && (scope.row.orderStatus==='success'||scope.row.orderStatus==='refundSuccess'||scope.row.orderStatus==='waitSign')
                            "
                            :tag="deviceType[scope.row.paymentModel.deviceType]"
                        ></k-tag>
                        <p v-else>-</p>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" width="100">
                    <template slot-scope="scope">
                        <k-tag
                            v-if="scope.row.paymentModel && scope.row.paymentModel.paymentType && (scope.row.orderStatus==='success'||scope.row.orderStatus==='refundSuccess'||scope.row.orderStatus==='waitSign')"
                            :tag="
                                paymentType[scope.row.paymentModel.paymentType]
                            "
                        ></k-tag>
                        <p v-else>-</p>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-folder-opened"
                            :loading="scope.row.opLoading"
                            @click="clickDetail(scope.row)"
                        >详情
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit && scope.row.orderStatus==='success'|| scope.row.orderStatus==='waitSign'"
                            class="warning"
                            type="text"
                            size="mini"
                            icon="el-icon-warning"
                            :loading="scope.row.opLoading"
                            @click="clickRefund(scope.row)"
                        >退款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            title="订单详情"
            :visible.sync="detailDialog"
            custom-class="order-dialog"
            width="60%"
        >
            <div
                v-loading="orderLoading"
                class="yx-center full-width"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                style="min-height: 60vh"
            >
                <el-tabs
                    v-if="orderDetail"
                    :key="orderDetail.id"
                    type="border-card"
                    class="tabs-box"
                >
                    <el-tab-pane label="基本信息">
                        <div class="yx-between al-str full-width">
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    <div class="xy-center">订单创建人：</div>
                                    <div class="yx-center">
                                        <el-avatar
                                            :src="
                                                coverImage(
                                                    orderDetail.createUser
                                                        .header
                                                )
                                            "
                                        >
                                        </el-avatar>
                                        <div>
                                            {{ orderDetail.createUser.name }}
                                        </div>
                                        <div>
                                            手机号：{{
                                                orderDetail.createUser.mobile
                                            }}
                                        </div>
                                    </div>
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    <div class="xy-center">
                                        订单最后修改人：
                                    </div>
                                    <div
                                        v-if="orderDetail.updateUser"
                                        class="yx-center"
                                    >
                                        <el-avatar
                                            :src="
                                                coverImage(
                                                    orderDetail.updateUser
                                                        .header
                                                )
                                            "
                                        >
                                        </el-avatar>
                                        <div>
                                            {{ orderDetail.updateUser.name }}
                                        </div>
                                        <div>
                                            手机号：{{
                                                orderDetail.updateUser.mobile
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    流水号：{{orderDetail.paymentModel.serialNumber}}<br/>
                                    订单号：{{ orderDetail.id }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    创建时间：{{ orderDetail.createdTime }}
                                </div>
                            </div>
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    支付方式：{{
                                        paymentType[
                                            orderDetail.paymentModel.paymentType
                                            ].desc
                                    }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    支付时间：{{
                                        orderDetail.paymentModel.payTime
                                    }}
                                </div>
                            </div>
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    <div class="xy-center">订单用户：</div>
                                    <div class="yx-center">
                                        <el-avatar
                                            :src="
                                                coverImage(
                                                    orderDetail.orderUser.header
                                                )
                                            "
                                        >
                                        </el-avatar>
                                        <div>
                                            {{ orderDetail.orderUser.name }}
                                        </div>
                                        <div>
                                            手机号：{{
                                                orderDetail.orderUser.mobile
                                            }}
                                        </div>
                                    </div>
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    <div class="xy-center">支付用户：</div>
                                    <div
                                        v-if="orderDetail.payUser"
                                        class="yx-center"
                                    >
                                        <el-avatar
                                            :src="
                                                coverImage(
                                                    orderDetail.payUser.header
                                                )
                                            "
                                        >
                                        </el-avatar>
                                        <div>
                                            {{ orderDetail.payUser.name }}
                                        </div>
                                        <div>
                                            手机号：{{
                                                orderDetail.payUser.mobile
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    订单价格：{{
                                        (orderDetail.price / 100).toFixed(2)
                                    }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    原价：{{
                                        (
                                            orderDetail.oneDetail.assets.price /
                                            100
                                        ).toFixed(2)
                                    }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    折扣价：{{
                                        (
                                            orderDetail.oneDetail.assets
                                                .discountPrice / 100
                                        ).toFixed(2)
                                    }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    代理价：{{
                                        (
                                            orderDetail.oneDetail.assets
                                                .agentPrice / 100
                                        ).toFixed(2)
                                    }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    天猫价：{{
                                        (
                                            orderDetail.oneDetail.assets
                                                .tmPrice / 100
                                        ).toFixed(2)
                                    }}
                                </div>
                            </div>
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    订单状态：{{
                                        orderStatus[orderDetail.orderStatus]
                                    }}
                                </div>
                                <div class="detail-item xy-center jf-start">
                                    支付状态：{{
                                        paymentStatus[
                                            orderDetail.paymentModel
                                                .paymentStatus
                                            ].desc
                                    }}
                                </div>
                            </div>
                            <div class="xy-between detail-line">
                                <div class="detail-item xy-center jf-start">
                                    过期时间：{{ orderDetail.expiredDate }}
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="商品信息">
                        <!--                        <div>-->
                        <!--                            套餐-->
                        <!--                        </div>-->
                        <!--                        <div>-->
                        <!--                            行业-->
                        <!--                        </div>-->
                        <!--                        <div>-->
                        <!--                            考试-->
                        <!--                        </div>-->

                        <el-table
                            ref="table"
                            v-loading="tableLoading"
                            :data="skuTable"
                            border
                            style="width: 100%;min-height:40em"
                            row-key="id"
                            @selection-change="tableSelectionChange"
                        >
                            <el-table-column
                                prop="categoryName"
                                label="科目名"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="栏目名"
                                width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="type"
                                label="栏目类型"
                                width="200"
                            >
                                <template slot-scope="scope">
                                    <k-tag
                                        v-for="v in scope.row.type"
                                        :key="v"
                                        :tag="columnType[v]"
                                    ></k-tag>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!--                        <div class="full-width yx-center jf-start al-str"
                                                     style="background: #9aaabf ;display: flex">

                                                    <div style="width: 20%">
                                                        订单号：{{ orderDetail.orderSn }}
                                                    </div>
                                                </div>-->
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";

export default {
    name: "OnlineOrder",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            totalAmount: 0,
            packageOptions: [],
            industryOptions: [],
            examOptions: [],
            skuTable: [],
            queryData: {
                examId: null,
                orderSn: null,
                columnType: null,
                orderStatus: null,
                paymentStatus: null,
                type: "onlineOrder",
                paymentType: null,
                deviceType: null,

                mobile: null,
                assetsName: null,
                orderTime: [],
                payTime: [],

                productDetail: true,
                orderMasterDetail: true,
                payment: true,
                orders: [
                    {
                        column: "created_time",
                        asc: false
                    }
                ]
            },
            detailDialog: false,
            orderLoading: false,
            orderDetail: null,
            flag: {
                refund: false
            }
        };
    },
    computed: {
        ...mapState({
            orderStatus: state => state.status.orderStatus,
            deviceType: state => state.status.deviceType,
            paymentType: state => state.status.paymentType,
            paymentStatus: state => state.status.paymentStatus,
            columnType: state => state.status.columnType
        })
    },
    created() {
        this.getIndustryOptions();
        // this.getExamOptions();
        //this.getPackageOptions();
        this.countAmount();
    },
    methods: {
        orderSearch() {
            this.clickSearch();
            this.countAmount();
        },
        countAmount(queryData) {
            let {
                createdStartTime,
                createdEndTime,
                payStartTime,
                payEndTime
            } = this.queryData;
            createdStartTime = createdStartTime || null;
            createdEndTime = createdEndTime || null;
            payStartTime = payStartTime || null;
            payEndTime = payEndTime || null;
            get(
                "/order/or/order/countAmount",

                this.removeNullKey({
                    type: "onlineOrder",
                    ...this.queryData,
                    ...(queryData || {}),
                    payTime: null,
                    orderTime: null,
                    createdStartTime:
                        createdStartTime !== null
                            ? createdStartTime.format("yyyy-MM-dd") +
                            " 00:00:00"
                            : null,
                    createdEndTime:
                        createdEndTime !== null
                            ? createdEndTime.format("yyyy-MM-dd") + " 23:59:59"
                            : null,
                    payStartTime:
                        payStartTime !== null
                            ? payStartTime.format("yyyy-MM-dd") + " 00:00:00"
                            : null,
                    payEndTime:
                        payEndTime !== null
                            ? payEndTime.format("yyyy-MM-dd") + " 23:59:59"
                            : null
                })
            ).then(res => {
                this.totalAmount = (res / 100).toFixed(2);
            });
        },
        calendarResetSearch() {
            // this.getExamOptions();
            this.resetSearch();
            this.countAmount();
        },
        choseSearchExam() {
            this.queryData.examId = null;
            get("/exam/exam/exam-by-industryId-app", {
                industryId: this.queryData.industryId,
                size: 1000
            }).then(res => {
                this.examOptions = res;
            });
            if(this.queryData.industryId !== null && this.queryData.industryId !== ""){
                get("/exam/package/exam-by-industryId-app", {
                    industryId: this.queryData.industryId,
                    examId: this.queryData.examId
                }).then(res => {
                    this.packageOptions = res;
                });
            }

        },
        choseSearchPackage() {
            get("/exam/package/list", {
                industryId: this.queryData.industryId,
                examId: this.queryData.examId
            }).then(res => {
                this.packageOptions = res;
            });
        },
        getPackageOptions() {
            get("/exam/package/list").then(res => {
                this.packageOptions = res;
            });
        },
        getIndustryOptions() {
            get("/exam/industry/app/list", {size: 1000}).then(res => {
                this.industryOptions = res;
            });
        },
        // getExamOptions() {
        //     get("/exam/exam/list",{"industryId": this.queryData.industryId}).then(res => {
        //         console.log("res", res);
        //         this.examOptions = res;
        //     });
        // },
        search(queryData) {
            let {
                createdStartTime,
                createdEndTime,
                payStartTime,
                payEndTime
            } = this.queryData;
            createdStartTime = createdStartTime || null;
            createdEndTime = createdEndTime || null;
            payStartTime = payStartTime || null;
            payEndTime = payEndTime || null;

            this.loadTable(
                "/order/or/order/page",
                {
                    ...queryData,
                    type: "onlineOrder",
                    payTime: null,
                    orderTime: null,
                    createdStartTime:
                        createdStartTime !== null
                            ? createdStartTime.format("yyyy-MM-dd") +
                            " 00:00:00"
                            : null,
                    createdEndTime:
                        createdEndTime !== null
                            ? createdEndTime.format("yyyy-MM-dd") + " 23:59:59"
                            : null,
                    payStartTime:
                        payStartTime !== null
                            ? payStartTime.format("yyyy-MM-dd") + " 00:00:00"
                            : null,
                    payEndTime:
                        payEndTime !== null
                            ? payEndTime.format("yyyy-MM-dd") + " 23:59:59"
                            : null
                },
                true,
                m => {
                    let nameArray = [];
                    for (let o of m.orderDetail) {
                        if (o.assets !== undefined && o.assets !== null) {
                            nameArray.push(o.assets.name)
                        }
                    }
                    m.skuName = nameArray.join(",")
                    m.oneDetail = m.orderDetail[0];
                    if(null!==m.oneDetail && m.oneDetail!==undefined){
                        m.asset = m.oneDetail.assets;
                    }
                    return m;
                }
            );
        },

        pickerOptions() {
            return {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            };
        },
        clickDetail(order) {
            this.orderLoading = true;
            this.detailDialog = true;
            this.orderDetail = null;
            get(`/order/or/order/user-order-detail/${order.id}`, {
                productDetail: true,
                payDetail: true
            })
                .then(async detail => {
                    let work = [];
                    detail.oldPrice = detail.oneDetail.assets.originalPrice;
                    if (detail.createdBy) {
                        work.push(
                            get(
                                `/user/cu/user/detail/${detail.createdBy}`
                            ).then(res => {
                                detail.createUser = res;
                            })
                        );
                    }
                    if (detail.modifyBy) {
                        work.push(
                            get(`/user/cu/user/detail/${detail.modifyBy}`).then(
                                res => {
                                    detail.updateUser = res;
                                }
                            )
                        );
                    }
                    if (detail.userId) {
                        work.push(
                            get(`/user/cu/user/detail/${detail.userId}`).then(
                                res => {
                                    detail.orderUser = res;
                                }
                            )
                        );
                    }
                    if (detail.paymentModel && detail.paymentModel.payUserId) {
                        work.push(
                            get(
                                `/user/cu/user/detail/${detail.paymentModel.payUserId}`
                            ).then(res => {
                                detail.payUser = res;
                            })
                        );
                    }
                    await Promise.all(work);
                    this.orderLoading = false;
                    this.orderDetail = detail;
                    console.log("orderDetail", this.orderDetail);
                    this.skuTable = [];
                    this.orderDetail.orderDetail.forEach(o => {
                        var assets = o.assets;
                        assets.orderId = o.orderId;
                        assets.totalCount = o.totalCount;
                        assets.categoryName = assets.categoryNameList.toString();
                        assets.type = assets.columnType;
                        console.log(assets.columnName);
                        this.skuTable.push(assets);
                        console.log("assets", this.skuTable);
                    });
                })
                .catch(e => {
                    console.error(e);
                    this.orderLoading = false;
                    this.detailDialog = false;
                });
        },
        clickRefund(order) {
            let refundInput = (order.paymentModel.paymentAmount / 100).toFixed(
                2
            );
            this.$prompt("退款金额", "确认退款金额", {
                confirmButtonText: "确定退款",
                cancelButtonText: "取消退款",
                inputValue: refundInput,
                message:
                    "订单金额：" +
                    (order.paymentModel.paymentAmount / 100).toFixed(2)
            })
                .then(({value}) => {
                    post("/order/or/order/order-skip-check-refund", {
                        id: order.id,
                        refundPrice: value
                    }).then(r => {
                        this.orderSearch();
                        this.$message.success("订单退款成功");
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "取消退款"
                    });
                });
        }
    }
};
</script>

<style lang="scss" scoped>
.tabs-box {
    width: 100%;
    border: 1px solid #e4e7ed;
    padding-bottom: 2em;
}

.minWidthClear {
    min-width: 0 !important;
}

.detail-line {
    min-height: 3em;
    margin: 1em 0;
    border-bottom: 1px solid #dcdcdc;
}

.detail-line .detail-item {
    width: 50%;
    height: 100%;
}

.form-bottom {
    width: 100%;
    height: 4em;
}

.form-btn-box {
    position: fixed;
    bottom: 0;
    box-shadow: -1px -4px 14px -2px rgba(241, 241, 241, 1);
    background-color: #f1f1f1;
}
</style>
